<template>
  <div
    v-show="visible"
    ref="toolTip"
    class="custom-tool-tip"
    :style="{top:top,left:left}"
    @mouseenter="showToolTip"
  >
    <div>{{ text }}</div>
    <div class="operateBtn">
      <div
        class="copyTag"
        :data-clipboard-text="text"
        @click="copyText"
      >
        一键复制
      </div>
      <!-- <div
        class="close"
        @click="closeTooltip"
      >
        关闭
      </div> -->
    </div>
    <div
      class="popper__arrow"
      :class="[popper__arrow_class]"
      :style="{left:arrowLeft,top:arrowTop}"
    />
  </div>
</template>

<script>
import Clipboard from 'clipboard'
export default {
  name: 'CustomToolTip',
  data () {
    return {
      visible: false,
      el: null,
      text: '',
      top: '',
      left: '',
      arrowLeft: '',
      arrowTop: '',
      placement: 'top',
      popper__arrow_class: ''
    }
  },
  watch: {
    visible: {
      handler (val, oldVal) {
        if (val && this.el) {
          this.$nextTick(() => {
            this.getToolTipPosintion(this.el)
          })
        }
      }
    }
  },
  mounted () {
  },
  methods: {
    getToolTipPosintion (el) {
      const clientRect = this.el.getBoundingClientRect()
      const tipWidth = this.$refs['toolTip'].offsetWidth
      const tipHalfWidth = tipWidth / 2
      const tipHeight = this.$refs['toolTip'].offsetHeight
      const tipHalfHeight = tipHeight / 2
      const elWidth = clientRect.width
      const elHalfWidth = elWidth / 2
      const elHeight = clientRect.height
      const elHalfHeight = elHeight / 2
      switch (this.judgeTipPlacement(el)) {
        case 'top-start':
          this.top = clientRect.top - tipHeight - 6 + 'px'
          this.left = clientRect.left + 'px'
          this.arrowLeft = elHalfWidth - 6 + 'px'
          this.popper__arrow_class = ''
          break
        case 'top-end':
          this.top = clientRect.top - tipHeight - 6 + 'px'
          this.left = clientRect.left - tipWidth + elWidth + 'px'
          this.arrowLeft = tipWidth - elHalfWidth - 6 + 'px'
          this.popper__arrow_class = ''
          break
        case 'bottom':
          this.top = clientRect.top + elHeight + 6 + 'px'
          if (clientRect.left - tipHalfWidth + elHalfWidth > 0) {
            this.left = clientRect.left - tipHalfWidth + elHalfWidth + 'px'
          } else {
            this.left = '0'
          }
          this.arrowLeft = tipHalfWidth - 6 + 'px'
          this.popper__arrow_class = 'popper__arrow_bottom'
          break
        case 'bottom-start':
          this.top = clientRect.top + elHeight + 6 + 'px'
          this.left = clientRect.left + 'px'
          this.arrowLeft = elHalfWidth - 6 + 'px'
          this.popper__arrow_class = 'popper__arrow_bottom'
          break
        case 'bottom-end':
          this.top = clientRect.top + elHeight + 6 + 'px'
          this.left = clientRect.left - tipWidth + elWidth + 'px'
          this.arrowLeft = tipWidth - elHalfWidth - 6 + 'px'
          this.popper__arrow_class = 'popper__arrow_bottom'
          break
        case 'left':
          this.top = clientRect.top - tipHalfHeight + elHalfHeight + 'px'
          this.left = clientRect.left - tipWidth - 6 + 'px'
          this.arrowLeft = tipWidth - 2 + 'px'
          this.arrowTop = tipHalfHeight - 6 + 'px'
          this.popper__arrow_class = 'popper__arrow_left'
          break
        case 'left-start':
          this.top = clientRect.top + 'px'
          this.left = clientRect.left - tipWidth - 6 + 'px'
          this.arrowLeft = tipWidth - 2 + 'px'
          this.arrowTop = elHalfHeight - 6 + 'px'
          this.popper__arrow_class = 'popper__arrow_left'
          break
        case 'left-end':
          this.top = clientRect.top + elHeight - tipHeight + 'px'
          this.left = clientRect.left - tipWidth - 6 + 'px'
          this.arrowLeft = tipWidth - 2 + 'px'
          this.arrowTop = tipHeight - elHalfHeight - 6 + 'px'
          this.popper__arrow_class = 'popper__arrow_left'
          break
        case 'right':
          this.top = clientRect.top - tipHalfHeight + elHalfHeight + 'px'
          this.left = clientRect.left + elWidth + 6 + 'px'
          this.arrowLeft = '-6px'
          this.arrowTop = tipHalfHeight - 6 + 'px'
          this.popper__arrow_class = 'popper__arrow_right'
          break
        case 'right-start':
          this.top = clientRect.top + 'px'
          this.left = clientRect.left + elWidth + 6 + 'px'
          this.arrowLeft = '-6px'
          this.arrowTop = elHalfHeight - 6 + 'px'
          this.popper__arrow_class = 'popper__arrow_right'
          break
        case 'right-end':
          this.top = clientRect.top + elHeight - tipHeight + 'px'
          this.left = clientRect.left + elWidth + 6 + 'px'
          this.arrowLeft = '-6px'
          this.arrowTop = tipHeight - elHalfHeight - 6 + 'px'
          this.popper__arrow_class = 'popper__arrow_right'
          break
        case 'top':
        default:
          this.top = clientRect.top - tipHeight - 6 + 'px'
          if (clientRect.left - tipHalfWidth + elHalfWidth > 0) {
            this.left = clientRect.left - tipHalfWidth + elHalfWidth + 'px'
            this.arrowLeft = tipHalfWidth - 6 + 'px'
          } else {
            this.left = '0'
            this.arrowLeft = elHalfWidth - 6 + 'px'
          }
          this.popper__arrow_class = ''
          break
      }
    },
    judgeTipPlacement (el) {
      const windowHeight = document.body.clientHeight || document.documentElement.clientHeight
      const windowWidth = document.body.clientWidth || document.documentElement.clientWidth
      const clientRect = this.el.getBoundingClientRect()
      const tipWidth = this.$refs['toolTip'].offsetWidth
      const tipHeight = this.$refs['toolTip'].offsetHeight
      const elWidth = clientRect.width
      const elHeight = clientRect.height
      let placement = this.placement || 'top'
      let placementFront = placement.split('-')[0]
      let placementAfter = placement.split('-')[1] || ''
      switch (placementFront) {
        case 'bottom':
          if (clientRect.top + elHeight + 6 + tipHeight > windowHeight) {
            placementFront = 'top'
          }
          break
        case 'left':
          if (clientRect.left - tipWidth - 6 < 0) {
            placementFront = 'right'
          }
          break
        case 'right':
          if (clientRect.left + elWidth + 6 + tipWidth > windowWidth) {
            placementFront = 'left'
          }
          break
        case 'top':
        default:
          if (clientRect.top - tipHeight - 6 < 0) {
            placementFront = 'bottom'
          }
          break
      }
      if (placementAfter) {
        return placementFront + '-' + placementAfter
      } else {
        return placementFront
      }
    },
    /**一键复制 */
    copyText(){
      const clipboard = new Clipboard('.copyTag')
      clipboard.on('success', e => {
        this.$message({ type: 'success', message: '复制成功' })
        this.visible = false
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
      // 不支持复制
        this.$message({ type: 'waning', message: '该浏览器不支持自动复制' })
        this.visible = false
        // 释放内存
        clipboard.destroy()
      })
    },
    /**关闭悬浮窗 */
    closeTooltip(){
      this.visible = false
    },
    showToolTip(){
      this.visible = true

    }
  }
}
</script>

<style lang="scss" scoped>
  .custom-tool-tip{
    position: fixed;
    z-index: 2054;
    padding: 10px;
    background: #2d3744;
    border:1px solid #4f6077;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.2;
    min-width: 10px;
    word-wrap: break-word;
    word-break: break-all;
    color: #ffffff;
    max-width: 500px;
    .operateBtn {
      display: flex;
      justify-content: flex-end;
      >div {
        /* border: 1px solid #878383; */
        /* border-radius: 4px; */
        padding: 3px;
        margin-right: 15px;
        cursor: pointer;
      }
    }
    .popper__arrow{
      position: absolute;
      display: block;
      bottom: -6px;
      width: 0;
      height: 0;
      border-color: transparent;
      border-width: 6px;
      border-style: solid;
      border-bottom-width: 0;
      border-bottom-color: #4f6077;
      border-top-color: #4f6077;
      &.popper__arrow_bottom{
        top: -6px;
        bottom: auto;
        border-bottom-width: 6px;
        border-top-width: 0;
        &::after{
          top: 2px;
          border-bottom-width: 6px;
          border-top-width: 0;
        }
      }

      &.popper__arrow_left{
        top: auto;
        bottom: auto;
        border-width: 6px;
        border-color: transparent;
        border-right-width: 0px;
        border-left-color: #4f6077;
        &::after{
          left: -2px;
          top: -6px;
          border-width: 6px;
          border-color: transparent;
          border-left-color: #2d3744;
          border-right-width: 0;
        }
      }

      &.popper__arrow_right{
        top: auto;
        bottom: auto;
        border-width: 6px;
        border-color: transparent;
        border-left-width: 0px;
        border-right-color: #4f6077;
        &::after{
          left: 8px;
          top: -6px;
          border-width: 6px;
          border-color: transparent;
          border-right-color: #2d3744;
          border-left-width: 0;
        }
      }
    }
    .popper__arrow::after{
      content: '';
      display: block;
      top: -8px;
      margin-left: -6px;
      border-width: 6px;
      border-bottom-width: 0;
      border-color: transparent;
      border-top-color: #2d3744;
      border-bottom-color: #2d3744;
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-style: solid;
    }
  }
</style>
